<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货物信息发布</title>
    <link rel="stylesheet" href="../css/element-ui@2.13.0-theme-chalk-index.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
</head>
<body>
<div id="app" >
    <div class="container" style="margin-top: 50px">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-form-item label="货物名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="货物类别" prop="typeId">
                <el-select v-model="form.typeId" placeholder="请选择货物类别">
                    <el-option
                            v-for="item in typeOptions"
                            :key="item.typeId"
                            :label="item.name"
                            :value="item.typeId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="货物重量" prop="weight">
                <el-input v-model="form.weight" style="width: 200px">
                    <template slot="append">kg</template>
                </el-input>

            </el-form-item>
                    <el-form-item label="运输起点" prop="start" style="width: 300px">
                        <el-input v-model="form.start"></el-input>
                    </el-form-item>
                    <el-form-item label="运输终点" prop="destination" style="width: 300px">
                        <el-input v-model="form.destination"></el-input>
                    </el-form-item>
                </el-col>
            <el-form-item label="价格区间">
                <el-input v-model="form.feesMin" placeholder="￥" style="width: 100px"></el-input>
                --
                <el-input v-model="form.feesMax" placeholder="￥" style="width: 100px"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即发布</el-button>
            </el-form-item>
        </el-form>
    </div>
    </el-form>
</div>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="../js/element-ui@2.13.0-index.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            form: {
                name: '',
                typeId: '',
                weight: '1' ,
                start: '',
                destination: '',
                feesMin: 0,
                feesMax:'',
                remark: ''
            },
            typeOptions :[],
            rules:{
                name: [
                    {required: true, message: "请输入货物名称", trigger: 'blur'}
                ],
                typeId: [
                    {required: true, message: "请选择货物类型", trigger: 'blur'}
                ],
                weight: [
                    {required: true, message: "请输入重量", trigger: 'blur'}
                ],
                start: [
                    {required: true, message: "请输入起点", trigger: 'blur'}
                ],
                destination: [
                    {required: true, message: "请输入终点", trigger: 'blur'}
                ],
            }
        },
        methods: {
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let that = this
                        let data = {
                            "destination": that.form.destination,
                            "feesMax": that.form.feesMax,
                            "feesMin": that.form.feesMin,
                            "name": that.form.name,
                            "remark": that.form.remark,
                            "start": that.form.start,
                            "typeId": that.form.typeId,
                            "weight": that.form.weight
                        }
                        getPostData(apiUrls.goods.addGood,data,'post',function (data) {
                            if (data.msg === 'success') {
                                that.$message({
                                    message: '发布成功',
                                    type: 'success'
                                });
                                top.location.href = 'homePage-customer.html?key=2'
                            } else {
                                that.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            getGoodTypes() {
                let that = this
                let data = ''
                getPostData(apiUrls.goodType.getGoodTypes,data,'post',function (data) {
                    if (data.msg === 'success') {
                        that.typeOptions = data.data
                    } else {
                        that.$message({
                            message: "获取货物类型列表失败",
                            type: 'error'
                        });
                    }
                })
            }
        },
        mounted() {
            this.getGoodTypes()
        }
    })
</script>
</body>
</html>